<template>
  <div class="singer">
    <Header v-bind:isBack="isBack" :title="title"></Header>
    <!-- 选项卡区域 -->
    <div class="tips">
      <div class="all-box">
        <span class="all btn" :class="{checked:isCheckAll1}" @click="checkAll(1)">全部</span>
      </div>
      <div class="list">
        <div
          class="tips-list"
          ref="list1"
          :class="{active:item.id == index1}"
          v-for="item in itemList1.son"
          :key="item.id"
          @click="checkType1(item.id,item.singer_category_name)"
        >
          <span>{{item.singer_category_name}}</span>
        </div>
      </div>
    </div>
    <div class="tips">
      <div class="all-box">
        <span class="all" :class="{checked:isCheckAll2}" @click="checkAll(2)">全部</span>
      </div>
      <div class="list">
        <div
          class="tips-list"
          ref="list2"
          :class="{active:item.id == index2}"
          v-for="item in itemList2.son"
          :key="item.id"
          @click="checkType2(item.id,item.singer_category_name)"
        >
          <span>{{item.singer_category_name}}</span>
        </div>
      </div>
    </div>
    <div class="tips">
      <div class="all-box">
        <span class="all" :class="{checked:isCheckAll3}" @click="checkAll(3)">全部</span>
      </div>
      <div class="list">
        <div
          class="tips-list"
          ref="list3"
          :class="{active:item.id == index3}"
          v-for="item in itemList3.son"
          :key="item.id"
          @click="checkType3(item.id,item.singer_category_name)"
        >
          <span>{{item.singer_category_name}}</span>
        </div>
      </div>
    </div>
    <!-- 推荐歌手部分 -->
    <div class="singers">
      <div class="title fs-32">推荐歌手</div>
      <div class="list">
        <div
          class="item space-between"
          v-for="item in singerList"
          :key="item.id"
          @click="checkSinger(item.singer_id)"
        >
          <div class="left space-between">
            <img :src="item.singer_avator" alt />
            <span class="fs-36">{{item.singer_artistic_name}}</span>
          </div>
          <div class="right" @click.stop="concernPerson(item.singer_id)">
            <img :src="followed" v-if="item.is_attention == 1" alt />
            <img :src="follow" v-else alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Footer from "@/components/footer-nav";
export default {
  name: "singer",
  data() {
    return {
      index1: 0,
      index2: 0,
      index3: 0,
      isBack: true,
      title: "歌手分类",
      isCheckAll1: true,
      isCheckAll2: true,
      isCheckAll3: true,
      follow: require("@/assets/index/follow.png"),
      followed: require("@/assets/index/followed.png"),
      itemList1: [],
      itemList2: [],
      itemList3: [],
      singerList: [],
      region: "", //地区
      fashion_style: "", //流行风格
      sex: "", //性别
      isSinger: true
    };
  },
  components: {
    Footer
  },
  methods: {
    // 选择歌手 去歌手主页
    checkSinger(id) {
      this.$router.push({
        path: "/index/song-sheet",
        query: { id: id, sheetStatus: 2, isSinger: this.isSinger }
      });
    },
    // 关注某人
    concernPerson(id) {
      const url = this.$host1 + `home/attentionSinger`;
      var params = {
        singer_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSingerList();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    //获取歌手分类列表
    getTypeList() {
      const url = this.$host1 + `home/singerCategoryList`;
      this.$axios
        .get(url)
        .then(res => {
          if (res.data.code == 200) {
            this.itemList1 = res.data.result[0];
            this.itemList2 = res.data.result[1];
            this.itemList3 = res.data.result[2];
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    checkAll(index) {
      if (index == 1) {
        this.index1 = -1;
        this.isCheckAll1 = true;
        this.region = "";
        this.getSingerList();
      } else if (index == 2) {
        this.index2 = -1;
        this.isCheckAll2 = true;
        this.sex = "";
        this.getSingerList();
      } else if (index == 3) {
        this.index3 = -1;
        this.isCheckAll3 = true;
        this.fashion_style = "";
        this.getSingerList();
      }
    },
    // 选择分类
    checkType1(id, name) {
      console.log(id, "---id");
      this.index1 = id;
      this.region = id;
      this.isCheckAll1 = false;
      this.getSingerList();
    },
    checkType2(id, name) {
      this.index2 = id;
      this.sex = id;
      this.isCheckAll2 = false;
      this.getSingerList();
    },
    checkType3(id, name) {
      this.index3 = id;
      this.fashion_style = id;
      this.isCheckAll3 = false;
      this.getSingerList();
    },
    // 获取歌手列表数据
    getSingerList() {
      const url = this.$host1 + `home/chooseSinger`;
      var params = {
        region: this.region,
        fashion_style: this.fashion_style,
        sex: this.sex
      };
      this.$axios
        .post(url, params)
        .then(res => {
          if (res.data.code == 200) {
            this.singerList = res.data.data;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    }
  },
  created() {
    this.getTypeList();
    this.getSingerList();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.singer {
  padding-top: 1.38rem;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  padding-bottom: 0.35rem;
  padding-left: 0.24rem;
  .tips {
    overflow-x: auto;
    overflow-y: hidden;
    height: 0.7rem;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.24rem 0 0;
    box-sizing: border-box;
    margin-bottom: 0.18rem;
    .all-box {
      position: absolute;
      // padding-left: 0.24rem;
      box-sizing: border-box;
      width: 1.58rem;
      height: 0.68rem;
      margin: 0;
      background-color: #fff;
      .all {
        display: inline-block;
        width: 1.2rem;
        text-align: center;
        line-height: 0.7rem;
        color: #666666;
        font-size: 0.28rem;
        font-weight: 500;
        height: 0.68rem;
        border-radius: 0.34rem;
        border: 0.015rem solid rgba(187, 187, 187, 1);
      }
      .checked {
        background: rgba(116, 8, 180, 1);
        color: #fff;
        border: 0.015rem solid rgba(116, 8, 180, 1);
      }
    }
    .list {
      display: flex;
      flex-direction: row;

      padding-left: 1.58rem;
      .tips-list {
        margin-right: 0.16rem;
        span {
          display: inline-block;
          width: 1.2rem;
          text-align: center;
          line-height: 0.7rem;
          color: #666666;
          border: 0.015rem solid rgba(187, 187, 187, 1);
          font-size: 0.28rem;
          font-weight: 500;
          height: 0.68rem;
          background: #fff;
          border-radius: 0.34rem;
          box-sizing: border-box;
        }
      }
      .active {
        span {
          background: rgba(116, 8, 180, 1);
          border: 0.015rem solid rgba(116, 8, 180, 1);
          color: #fff;
        }
      }
    }
  }
  .tips::-webkit-scrollbar {
    display: none;
  }

  .userImage {
    overflow: hidden;
    .userImageAllWrapper {
      width: 11.6rem;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }
    .userImageAllWrapper:last-child {
      margin-left: -0.4rem;
    }
    li {
      margin-right: 0.2rem;
      margin-bottom: 0.2rem;
      padding: 0.1rem 0.3rem;
      border: 0.01rem solid #ececec;
      img {
        display: flex;
      }
    }
  }
  // 推荐歌手部分的样式
  .singers {
    padding: 0 0.3rem;
    box-sizing: border-box;
    .title {
      font-weight: 800;
      color: rgba(68, 68, 68, 1);
      line-height: 0.32rem;
      padding: 0.27rem 0 0.3rem 0;
      box-sizing: border-box;
      border-bottom: 0.01rem solid rgba(233, 233, 233, 1);
    }
    .list {
      padding-top: 0.34rem;
      box-sizing: border-box;
      .item {
        height: 0.8rem;
        margin-bottom: 0.24rem;
        border-radius: 50%;
        .left {
          img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            margin-right: 0.21rem;
          }
          span {
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
            line-height: 0.32rem;
          }
        }
        .right {
          width: 1.18rem;
          height: 0.5rem;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
